<template>
  <div class="depa">
    <Button type="success" @click="createDepa">添加</Button>
    <!-- 添加修改框 -->
    <Modal v-model="isModal" :title="title">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="depaname">
          部门名称：
          <Input type="text" v-model="formInline.depaname" placeholder="depaname"></Input>
        </FormItem>
        <FormItem prop="depaid">
          部门编号：
          <Input type="text" v-model="formInline.depaid" placeholder="depaid"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="isModal=false">取消</Button>
        <Button type="primary" size="large" @click="editDepa(formInline)">确定</Button>
      </div>
    </Modal>
    <!-- 列表 -->
    <Table border ref="selection" :columns="columns" :data="deparList">
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="createDepa(row)">修改</Button>
        <Button type="error" size="small" @click="delDepa(row.id)">删除</Button>
      </template>
    </Table>
    <!-- 分页 -->
     <Page :total="total" show-sizer @on-change="toPage" @on-page-size-change="getPageSize"/>
  </div>
</template>
<script>
import {
  deparList,
  addDepar,
  editDepar,
  delDepar
} from "../../../../request/api.js";
export default {
  data() {
    return {
      // 显示添加弹框
      isModal: false,
      // 弹出框标题
      title: "添加部门",
      // 当前要修改数据的Id
      id: null,
      // 表格列标题
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "编号",
          key: "id"
        },
        {
          title: "部门名称",
          key: "name"
        },
        {
          title: "部门编号",
          key: "sn"
        },
        {
          title: "Action",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      // 部门数据
      deparList: [],
      // 数据总条数
      total:0,
      // 当前页码
      currentPage:1,
      // 一页显示的数据个数
      pageSize:10,
      // 表单提交数据
      formInline: {
        depaname: "",
        depaid: ""
      },
      // 表单规则
      ruleInline: {
        depaname: [
          {
            required: true,
            message: "部门名不能为空",
            trigger: "blur"
          }
        ],
        depaid: [
          {
            required: true,
            message: "部门编号不能为空",
            trigger: "blur"
          }
        ]
      },
      
    };
  },
  created() {
    // 获取数据
    this.getdeparList();
  },
  methods: {
    // 弹出框提示
    background(type, msg) {
      this.$Message[type]({
        background: true,
        content: msg
      });
    },
    // 部门数据获取
    getdeparList() {
      deparList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.deparList = res.data.list;
        this.total = res.data.total;
        console.log(res);
      });
    },
    // 添加,修改部门弹出框
    createDepa(row) {
      this.formInline = {
        depaname: "",
        depaid: ""
      };
      this.id = null;
      if (row.id) {
        // 绑定当前需要修改的id
        this.id = row.id;
        this.title = "修改部门";
        this.formInline = {
          depaname: row.name,
          depaid: row.sn
        };
      } else {
        this.title = "添加部门";
      }
      this.isModal = true;
    },
    // 添加,修改部门
    editDepa(formInline) {
      let formList = {
        name: formInline.depaname,
        sn: formInline.depaid
      };
      // 表单验证
      this.$refs["formInline"].validate(valid => {
        if (valid) {
          // 修改部门数据
          if (this.id != null) {
            formList.id = this.id;
            editDepar(formList).then(res => {
              if (res.success) {
                this.background("success", "修改成功");
                this.isModal = false;
                this.getdeparList();
              } else {
                this.background("error", "修改失败");
              }
            });
          } else {
            //  添加部门数据
            addDepar(formList).then(res => {
              if (res.success) {
                this.background("success", "添加成功");
                this.isModal = false;
                this.getdeparList();
              } else {
                this.background("error", "添加失败");
              }
            });
          }
        } else {
          this.$Message.error("部门名或部门编号不能为空");
        }
      });
    },

    // 删除部门
    delDepa(id) {
      delDepar({ id }).then(res => {
        if (res.success) {
          this.background("success", "删除成功");
          this.getdeparList();
        } else {
          this.background("error", "删除失败");
        }
      });
    },
    // 
    toPage(page){
      this.currentPage = page;
      this.getdeparList();
    },
    // 得到条目数
    getPageSize(pageSize){
      console.log(pageSize);
      this.pageSize = pageSize;
      this.getdeparList();
    }
  }
};
</script>
<style lang="less" scoped>
.depa {
  .ivu-table-wrapper.ivu-table-wrapper-with-border{
    margin: 10px auto;
  }
  .ivu-form-item.ivu-form-item-required {
    .ivu-input-wrapper {
      display: block;
    }
    .ivu-input {
      display: block;
    }
  }
  .ivu-page{
    float:right;
  }
}
</style>